<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">
</head>

<body>
    <button id="message">我要留言</button>
    <div id="box">
        <div id="box1">
            <h1 class="main1">发布留言</h1>
            <hr>
            <h2 class="main2">留言标题:</h2>
            <input type="text" id="int1">
            <h2 class="main3">留言人:</h2>
            <input type="text" id="int2">
            <h2 class="main4">留言内容:</h2>
            <textarea name="" id="int3" cols="112" rows="8"></textarea>
            <hr>
            <button id="publish">发布</button>
            <button id="shutdown">关闭</button>
        </div>
    </div>
    <table>
        <thead>
            <tr id="tit">
                <th>ID</th>
                <th>标题</th>
                <th>留言人</th>
                <th>内容</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody id="content"></tbody>
    </table>

</body>
<script>
    // 1. 打开页面 可以看到留言列表
    // 2. 点击留言按钮 弹出添加留言表单
    // 3. 点击发布 ，显示发布成功， 1秒后关闭弹出， 显示最新留言列表
    // 4. 点击删除 弹出二次确认弹框  确定即删除，取消则不删，删除成功提示然后显示最新的列表
    //    接口地址如下：
    //    ​	获取留言列表：GET https://liu.zzgoodqc.cn/lyb
    //    ​	发布留言接口：POST https://liu.zzgoodqc.cn/lyb/add
    //    ​		发布留言需要的字段：
    //    ​			title、content、name
    //    ​	删除接口地址：GET https://liu.zzgoodqc.cn/del/2
    //    ​				2是该留言的id 获取列表时会返回id



    window.onload = function () {
        // 渲染页面
        var xhttp = new XMLHttpRequest()
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                var dataobj = JSON.parse(xhttp.responseText)
                var str = ''
                for (let i in dataobj.data) {
                    str += `<tr>
                                <td>${dataobj.data[i].id}</td>
                                <td>${dataobj.data[i].name}</td>
                                <td>${dataobj.data[i].title}</td>
                                <td>${dataobj.data[i].content}</td>
                                <td>${dataobj.data[i].updated_at}</td>
                                <td><a href='' id='dlt'>删除</a></td>
                            </tr>`
                }
                document.getElementById('content').innerHTML = str
            }
        }
        xhttp.open('GET', 'https://liu.zzgoodqc.cn/lyb', true)
        xhttp.send()
        // 显示
        document.getElementById('message').onclick = function () {
            var box1 = document.getElementById('box')/* .style.display='block' */
            box1.style.display = 'block'
        }
        // 隐藏
        document.getElementById('shutdown').onclick = function () {
            box.style.display = 'none'
        }
        // 发送信息
        document.getElementById('publish').onclick = function () {
            var a = document.getElementById('int1').value,
                b = document.getElementById('int2').value,
                c = document.getElementById('int3').value
            var xhttp1 = new XMLHttpRequest();
            xhttp1.open('POST', 'https://liu.zzgoodqc.cn/lyb/add', true)
            xhttp1.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
            xhttp1.send(`title=${a}&content=${b}&name=${c}`)
            // box.style.display = 'none'
            if (a == '' || b == '' || c == '') {
                // alert('提交成功')
                alert('提交失败')
            } else {
                // alert('提交失败')
                alert('提交成功')

            }

        }
        // 删除
        // function dlt(obj) {
        //     xhttp('GET', 'https://liu.zzgoodqc.cn/del/2', function () {
        //         if (data.code == 200) {
        //             alert('删除成功')
        //         } else {
        //             alert('删除失败')
        //         }
        //     })

        // }






        // document.getElementById('message').onclick = function () {
        //     box.style.display = 'block'
        // }




        // document.getElementById('publish').onclick = function () {

        //     var xhttp1 = new XMLHttpRequest();
        //     xhttp1.open('POST', 'https://liu.zzgoodqc.cn/lyb/add', true)
        //     xhttp1.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')

        //     xhttp1.onreadystatechange = function () {
        //         if (xhttp1.readyState == 4 && xhttp1.status == 200) { }
        //         var data1obj = JSON.parse(xhttp1.responseText)

        //         if (data1obj.code == 0) {
        //             document.getElementById('tit').innerHTML = data1obj.msg

        //             var str = ''
        //             for (let i in data1obj.data) {
        //                 str += `<tr>
        //                     <td>${+i + 1}</td>
        //                     <td>${data1obj.data[i].title}</td>
        //                 </tr>`
        //             }
        //             document.getElementsByTagName('tbody')[0].innerHTML = str


        //         }
        //     }

        //     xhttp1.send()


        // }







    }

</script>

</html>